<template>
	<view class="content_bg">
			<!-- 表单 -->
			<view class="contentForm">
				<u-form labelPosition="top" ref="loginForm" :model="loginForm" :labelStyle="labelStyle">
					<u-form-item label="姓名" prop="name">
						<view class="formInput">
							<u-input placeholder="请输入名字" v-model="loginForm.name" clearable border="none"
								fontSize="26rpx" color="#333"
								customStyle="background:#F3F3F3;border-radius: 6px"></u-input>
						</view>
					</u-form-item>
					<u-form-item label="联系方式" labelWidth="100" prop="phone">
						<view class="formInput">

							<u-input placeholder="请输入手机号" border="none" fontSize="26rpx" color="#333"
								v-model="loginForm.phone" clearable />
						</view>
					</u-form-item>
					<u-form-item label="问题简要描述 " labelWidth="120" prop="describe">
						<u-textarea
						    v-model="loginForm.describe"
						    :maxlength="1000000"
						    placeholder="请输入您的问题"
							height="300rpx"
						    :customStyle="{
						        backgroundColor: '#F3F3F3 ',
						        color: '#333',
						        fontSize: '28rpx',
								border:'0' ,
						    }"
						></u-textarea>
					</u-form-item>
				</u-form>
				<view class="flex_wrap row_center">
					<view class="lq_btn" @click="to_success('loginForm')">
						提交
					</view>
				</view>
			</view>
	</view>

</template>

<script>
	import {
		baseUrl
	} from "@/config/tendIdConfig.js";
	export default {
		data() {
			return {
				labelStyle: {
					fontSize: "36rpx",
					color: "#333",
					fontWeight: "bold",
				},
				loginForm: {
					name: "",
					describe: "",
					phone: "",
				},
				loginFormRules: {
					name: [{
						type: "string",
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					}, ],
					describe: [{
						type: "string",
						required: true,
						message: "请填写描述",
						trigger: ["blur", "change"],
					}, ],
					phone: [{
							required: true,
							message: "请输入手机号",
							trigger: ["change", "blur"],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: "手机号码不正确",
							trigger: ["change", "blur"],
						},
					],
				},
			};
		},
		onReady() {
			this.$refs.loginForm.setRules(this.loginFormRules);
		},
		onLoad(options) {
			this.equityInfoId = options.equityInfoId;
			this.cardNum = options.cardNum;
		},
		methods: {
			to_success() {
				const token = this.$store.getters?.customer_token || uni.getStorageSync("customer_token")
				const that = this;
				this.$refs.loginForm
					.validate()
					.then((res) => {
						uni.request({
							url: baseUrl + '/customer/equityWorkOrderH5/web/addEquityWorkOrder',
							method: "POST",
							header: {
								Authorization: token
							},
							data: {
								equityInfoId: that.equityInfoId,
								cardNum: that.cardNum,
								workInfo: JSON.stringify(that.loginForm),
							},
							success(res) {
								if (res.data.code == 200) {
									that.$u.route({
										url: "/pages_card/writeResults/index",
										params: {
											workState: res.data.data.workState,
										}
									})
								} else {
									uni.$u.toast(res.data.msg);
								}
							},
						});
					})
					.catch((errors) => {});
			},
		},
	};
</script>

<style scoped>
	.content_bg {
		width: 100%;
		height: 100%;
		background: #3e3e3e;
		padding: 0.9375rem 0.875rem 2.25rem;
	}
	.contentForm {
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx 28rpx 54rpx;
	}

	.formInput {
		height: 80rpx;
		background: #f3f3f3;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.btn {
		width: 180rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #F7D25B;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		padding: 0;
	}

	.activebtn {
		width: 180rpx;
		height: 80rpx;
		background: #aaa;
		border-radius: 8rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #fff;
		padding: 0;
	}

	.lq_btn {
		width: 520rpx;
		height: 86rpx;
		background: linear-gradient(315deg, #E9A656 0%, #FDE3B6 100%);
		border-radius: 40000rpx 40000rpx 40000rpx 40000rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		margin-top: 40rpx;
	}
</style>